import { Button, Card, Input } from "antd";
import { useAppDispatch } from "apis/module/store";
import {
  increment,
  decrement,
  incrementByAmount,
  setCounter,
} from "@/store/slices/counterSlice";
import { useAppSelector } from "@/store";

const Counter = () => {
  const counter = useAppSelector((state) => state.web.value);
  const dispatch = useAppDispatch();

  return (
    <Card>
      <p>
        React 状态管理 Redux - Counter Value : <b>{counter}</b>
      </p>
      <br />
      <Button
        type="primary"
        onClick={() => {
          dispatch(increment());
        }}
      >
        Add 1
      </Button>
      <Button
        onClick={() => {
          dispatch(decrement());
        }}
      >
        Subtract 1
      </Button>
      <Button
        onClick={() => {
          dispatch(incrementByAmount(10));
        }}
      >
        Add 10
      </Button>
      <Button
        onClick={() => {
          dispatch(incrementByAmount(-10));
        }}
      >
        Subtract 10
      </Button>
      <br />
      <p>Or set it here</p>
      <Input
        value={counter}
        onChange={(ev) => {
          const newValue = ev.target.value;
          dispatch(setCounter(parseFloat(newValue)));
        }}
      />
    </Card>
  );
};

export default Counter;
